<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时</title>
</head>
<body>
  <script src="../dist/mvu.js"></script>
  <style>
    .container{
      position: fixed;
      top:0px;
      left:0px;
      width:100%;
      height: 100%;
      background: #006699;
      display: flex;
      justify-content: center;
      align-items: center;
      /*flex-direction: row;*/
      color:#fff;
      font-size: 100px;
      transition: all linear .5s;
    }
    button.btn{
      border: none;
      color:#fff;
      font-size: 50px;
      padding: 50px;
      border:1px solid #fff;
      border-radius: 10px;
      cursor: pointer;
      background: none;
    }
  </style>
  <script>
    mvu.config.log = true
    var app = mvu.app
    var createMsgType = mvu.createMsgType
    var Msg = createMsgType()
    var ModelMsg = mvu.ModelMsg
    var M = ModelMsg
    var callback = mvu.callback
    var getMsgVal = mvu.getMsgVal
    var f = mvu.f

    function init(model){
      return ModelMsg(model,Msg('dec'))
    }

    function update(msg,model){
      if(Msg.eq('dec',msg)){
        if(model.top == 0){
          return model
        }else{
          var msg = callback(function(just){
            setTimeout(function(){just(Msg('dec'))},1000)
          })
          return ModelMsg(f.overi('top',a=>a-1,model),msg)
        }
      }else if(Msg.eq('start',msg)){
        return ModelMsg(f.over('top',msg._1,model),Msg('dec'))
      }else if(Msg.eq('child',msg)){
        return mvu.modelMsgMap(Msg('child'),data=>childUpdate(msg._1,data),fn=>f.overi('child',fn,model))
      }else if(Msg.eq('child1',msg)){
        return mvu.modelMsgMap(Msg('child1'),data=>childUpdate(msg._1,data),fn=>f.overi('child1',fn,model))
      }else{
        throw 'Unfind msg process it'
      }
    }
    function view(model){
      var style = {
        background:model.top%2?'#006699':'#009999'
      }
      return ['.container',{style:style}
        ,model.top?model.top:['button.btn',{_click:Msg('start',15)}
          ,'Start 15']
        ,[child,Msg('child'),model.child,'child dec']
        ,[child,Msg('child1'),model.child1,'child dec']]
    }



    // ============= child app
    var childMsg = createMsgType()
    function child(model,str){
      return ['button.btn',{_click:childMsg('dec',1)},str,model]
    }
    function childUpdate(msg,model) {
      if(childMsg.eq('dec',msg)){
        msg = callback(function(just){
          setTimeout(()=>just(childMsg('add',10)),2000)
        })
        return M(model - 1,[msg])
      }else if(childMsg.eq('add',msg)){
        return model + msg._1
      }else{
        throw 'undefined child msg'
      }
    }
    function childCreate(){
      return 100
    }


    // ============ main
    app(document.body,{
      model:{
        top:10,
        child:childCreate(),
        child1:childCreate()
      },
      init:init,
      view:view,
      update:update
    })
  </script>
</body>
</html>